<template>
    <div class="frame">
        <div class="map">
            <div class="city">
                <div class="dotted"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
            <div class="city tb">
                <div class="dotted"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
            <div class="city gz">
                <div class="dotted"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.frame {
    background-color: #333;
    position: relative;
    height: 100%;
}

.map {
    width: 747px;
    height: 616px;
    background: #333 url(./assets/map.png) no-repeat;
    position: relative;
    top: 10%;
    margin: 0 auto;
}

.city {
    position: absolute;
    top: 227px;
    right: 193px;
    color: #fff;
}

.tb {
    top: 500px;
    right: 80px;
}

.gz {
    top: 530px;
    right: 200px;
}

.dotted {
    width: 8px;
    height: 8px;
    background-color: #09f;
    border-radius: 50%;
}

.city div[class^="pulse"] {
    height: 8px;
    width: 8px;
    box-shadow: 0 0 12px #009dfd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: wave 1.2s linear infinite;
}

.city div.pulse2 {
    animation-delay: 0.4s;
}

.city div.pulse3 {
    animation-delay: 0.8s;
}

@keyframes wave {
    0% {
        //
    }

    70% {
        /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
        height: 40px;
        width: 40px;
        opacity: 1;
    }

    100% {
        height: 70px;
        width: 70px;
        opacity: 0;
    }
}</style>